<template>
  <div class="RankingList">
    <div class="h3-title">
      <div class="left">
        <span class="font-icon"></span>
        <b class="title">榜单</b>
      </div>
      <div class="right">
        <span class="more-text" @click="screenRanking">更多</span>
        <span class="iconfont">&#xe6d7;</span>
      </div>
    </div>
    <div class="container">
      <div class="rankind-item"><RankingListItem :topList="topList.slice(0,1)" /></div>
      <div class="rankind-item"><RankingListItem :topList="topList.slice(1,2)" /></div>
      <div class="rankind-item"><RankingListItem :topList="topList.slice(2,3)" /></div>
    </div>
  </div>
</template>

<script>
import { toplistDetail } from "@/api";
import RankingListItem from "@/components/rankingListItem"
export default {
  name: "RankingList",
  components: {
    RankingListItem,
  },
  data() {
    return {
      topList: [{},{},{}],
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.getToplistDetail();
    },
    getToplistDetail() {
      toplistDetail().then((data) => {
        this.topList = data.list.slice(0, 3);
      });
    },
    screenRanking() {
      this.$router.push({
        name: "findMusicRanking"
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.RankingList {
  padding: 10px 20px;
  .container {
    margin-top: 20px;
    box-sizing: border-box;
    border: 1px solid rgb(210, 210, 210);
    min-height: 100px;
    background-color: rgb(244, 244, 244);
    display: flex;
    .rankind-item {
      &:last-child{
        border-right:0;
      }
      flex:1;
      border-right:1px solid rgb(195,195,195);
    }
  }
}
.h3-title {
  display: flex;
  padding-bottom: 4px;
  justify-content: space-between;
  border-bottom: 2px solid rgb(193, 13, 12);
  .right {
    .more-text {
      font-size: 12px;
      color: #666;
      cursor: pointer;
      &:hover {
        text-decoration: underline;
      }
    }
    .iconfont {
      margin: 0 6px;
      color: rgb(193, 13, 12);
      font-size: 12px;
    }
  }
  .left {
    display: flex;
    align-items: center;
    i {
      margin: 0 13px;
      height: 11px;
      border-right: 2px solid #ccc;
    }
    .text {
      font-size: 12px;
      color: #666;
      cursor: pointer;
      &:hover {
        text-decoration: underline;
      }
    }
    .title {
      cursor: pointer;
      margin-right: 20px;
      font-size: 20px;
      font-weight: normal;
      line-height: 28px;
    }
    .font-icon {
      margin: 0 10px;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background-color: rgb(193, 13, 12);
      position: relative;
      &::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background-color: #fff;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        transform: translate(-0px, -0.5px);
      }
    }
  }
}
</style>